<template>
  <div id='courseList'>
    <comTable
      :column="column"
      :tableData="tableData"
      :search="true"
      :placeholder="'请输入课程号'"
      @handleSearch="handleSearch"
      @handleAdd="handleAdd"
      :add="'添加课程'"
      :pageSize="pageSize"
      :pageSizes="pageSizes"
      :currentPage="currentPage"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :selection="true"
      @selection-change="handleSelectionChange"
    >
      <template v-slot:slot_operate="scope">
        <el-button
          type="primary"
          icon="el-icon-edit"
          circle
          @click="editCourse(scope.row)"
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-delete"
          circle
          @click="delCourse(scope.row)"
        ></el-button>
      </template>
    </comTable>

    <!-- 弹框 -->
    <cdialog @click="updateCourse">
      <el-form
        :inline="true"
        :model="courseForm"
        ref="courseForm"
        :rules="rules"
        status-icon
        class="demo-form-inline"
        label-position="right"
        label-width="80px"
      >
        <el-form-item
          label="课程名"
          prop="cname"
        >
          <el-input v-model="courseForm.cname"></el-input>
        </el-form-item>

        <el-form-item
          label="任课教师"
          prop="tno"
        >
          <el-select v-model="courseForm.tno">
            <el-option
              v-for="item in teacherList"
              :key="item.tno"
              :label="item.tname"
              :value="item.tno"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item
          label="学分"
          prop="ccredit"
        >
          <el-input v-model="courseForm.ccredit"></el-input>
        </el-form-item>

        <el-form-item
          label="考核方式"
          prop="cexamMethod"
        >
          <el-input v-model.number="courseForm.cexamMethod"></el-input>
        </el-form-item>

        <el-form-item
          label="上课地点"
          prop="cplace"
        >
          <el-input v-model="courseForm.cplace"></el-input>
        </el-form-item>

        <el-form-item
          label="上课时间"
          prop="ctime"
        >
          <el-input
            v-model="courseForm.ctime"
            style="width: 255px;"
            type="time"
          ></el-input>
        </el-form-item>

      </el-form>
    </cdialog>
  </div>
</template>

<script>
import comTable from "@/components/common/comTable.vue"
import cdialog from "@/components/dialog/TeaDialog.vue"
import { confirm } from "@/util/confirm"
import { getCoursePage, delCourse, searchCourse, editCourse, addCourse } from "@/api/course"
import { getTeacherList } from "@/api/teacher"

export default {
  name: 'courseList',
  components: { comTable, cdialog },
  data() {
    return {
      column: [
        { label: '课程号', prop: 'cno', sortable: true },
        { label: '课程名称', prop: 'cname' },
        { label: '学分', prop: 'ccredit', sortable: true },
        { label: '考核方式', prop: 'cexamMethod', },
        { label: '上课地点', prop: 'cplace', },
        { label: '上课时间', prop: 'ctime', },
        { label: '任课教师', prop: 'tname', },
        { label: '操作', prop: 'operate', type: 'slot', slot_name: "slot_operate" },
      ],
      tableData: [],
      pageSize: 8,
      pageSizes: [8, 16, 24, 32],
      currentPage: 1,
      total: 0,
      courseForm: {},
      rules: {
        ccredit: [
          { required: true, message: '请输入学分', trigger: 'blur' },
        ],
        cexamMethod: [
          { required: true, message: '请输入考核方式', trigger: 'blur' },
        ],
        cname: [
          { required: true, message: '请输入课程名', trigger: 'blur' },
        ],
        cplace: [
          { required: true, message: '请输入上课地点', trigger: 'blur' },
        ],
        ctime: [
          { required: true, message: '请选择上课时间', trigger: 'blur' },
        ],
        tno: [
          { required: true, message: '请选择任课教师', trigger: 'blur' },
        ]
      },
      teacherList: []
    }
  },
  created() {
    this.GetCoursePage()
    this.GetTeacherList()
  },
  methods: {
    GetTeacherList() {
      getTeacherList().then(res => {
        // console.log("23123", res);
        this.teacherList = res.data.data.teacher
      })
    },
    GetCoursePage() {
      getCoursePage(this.currentPage, this.pageSize).then(res => {
        // console.log(res);
        if (res.data.code == 100) {
          // console.log(res);
          this.tableData = res.data.data.page.list
          this.total = res.data.data.page.total
        }
      })
    },
    // 显示修改
    editCourse(row) {
      // console.log(row);
      this.$bus.$emit('visibleDialog', '修改课程信息')
      // 清楚数据
      this.$nextTick(() => {
        this.$refs['courseForm'].clearValidate()
      })
      // 复制一份数据显示
      this.courseForm = JSON.parse(JSON.stringify(row))
    },
    // 显示添加
    handleAdd() {
      this.$bus.$emit('visibleDialog', '添加课程信息')
      // // 清楚数据
      this.$nextTick(() => {
        this.$refs['courseForm'].clearValidate()
      })
      // addTeacher
      this.courseForm = {}
      this.courseForm.ssex = '男'
    },
    // 更改| 添加
    updateCourse(title) {
      this.$refs['courseForm'].validate(valid => {
        if (valid) {
          // 判断是增加还是修改
          if (title == "修改课程信息") {
            editCourse(this.courseForm).then(res => {
              // console.log(res);
              if (res.data.code == 100) {
                // 刷新数据
                this.GetCoursePage()
                this.$message.success('更改成功')
                // 关闭
                this.$bus.$emit('visibleDialog', '', false)
              } else {
                // 关闭
                this.$message.error('更改失败')
                this.$bus.$emit('visibleDialog', '', false)
              }
            })
          } else {
            // 添加
            addCourse(this.courseForm).then(res => {
              if (res.data.code == 100) {
                // 刷新数据
                this.GetCoursePage()
                this.$message.success('添加成功')
                // 关闭
                this.$bus.$emit('visibleDialog', '', false)
              } else {
                // 关闭
                this.$message.error('添加失败')
                this.$bus.$emit('visibleDialog', '', false)
              }
            })
          }
        }
      })
    },
    // 删除
    delCourse(row) {
      confirm(this, function () {
        delCourse(row.cno).then(res => {
          // console.log("del", res);
          if (res.data.code == 100) {
            this.$message.success("删除成功")
            // 刷新
            this.GetCoursePage()
          } else {
            this.$message.error("删除失败")
          }
        })
      }.bind(this))
    },
    // 查(接口还没)
    handleSearch(input) {
      if (input == '') {
        return this.GetCoursePage()
      }
      searchCourse(input).then(res => {
        // console.log(res);
        if (res.data.code == 100) {
          this.tableData = [res.data.data.course]
          this.total = 1
        } else {
          this.tableData = []
          this.total = 0
        }
        this.currentPage = 1
      })

    },
    // 页面大小
    handleSizeChange(size) {
      this.pageSize = size
      this.currentPage = 1
      this.GetCoursePage()
    },
    // 页码
    handleCurrentChange(currentPage) {
      // 切换页码
      this.currentPage = currentPage
      this.GetCoursePage()
    },
    // 全选
    handleSelectionChange(selectedList) {
      console.log(selectedList);
    }
  },
};
</script>
<style scoped>
/* .ctime {
  padding-right: 15px;
} */
</style>
